spread operator Shallow Copy vs Deep Copy feat.Spread Operator {...} source: Spread Operator는 Deep Copy를 만들어준다 하지만 데이터가 nested 되어 있을 경우에는 nested data는 shallow copy가 된다. 따라서 nested 되어있는 부분도 deep copy 하려면 {...a, b: {...b.foods}}이런식으로 또 한번의 Spread Operator를 행해 주어야 한다 source:... deep copyspread operatorES5shallow copyES5 Premitive & Reference (원시값과 참조값) String Boolean Primitive 🏐 단순히 값이 같으면 동일하게 판별 String은 Primitive(원시값)이다. 원시값의 모양이 같으면 같은 값으로 단순하게 판별한다. 🏐 할당된 값은 그대로 a가 10인 시점에서 b에 값을 한번 할당했기 때문에 a의 값이 변경되어도 다시 a를 할당하지 않는 한b는 변경되지 않는다. 🏐 변수 생성 과정 메모리에 { id: '1', count: ... referenceshallow copy참조값spread operatorpremitive원시값복사얕은복사 전개연산자premitive Day.12 바닐라 자바스크립트(2021.08.17) UI를 기준으로 컴포넌트를 나누니 변경사항이 발생했을때 너무 편하고 오류가 발생하더라도 더 잘찾을수 있는 것 같다. 뭐가 좋은지는 알겠지만 아직 자유자재로 UI기반 컴포넌트로 코드를 짤수는 없지만 연습하다보면 점점 나아질거다. 위 코드에서 ...이라는 spread operator가 사용되었는데 저게 너무 궁금해서 콘솔창에 출력해봤는데 오류가 뜬다. 그래서 이유를 찾아보다가 몰랐던 구조분해할당... 구조분해할당UI컴포넌트spread operatorES6vanillajsES6 [JS] 얕은복사와 깊은복사(feat.리액트에서 깊은복사를...?) 객체가 담겨있는 변수를 다른 변수에 할당하면 데이터 복사가 아닌 참조가 일어나게 되어, 한 변수의 데이터를 변경하면 다른 변수의 데이터도 함께 변경이 된다. 동일한 데이터를 바라보고 있는 것이 아닌, 똑같은 구조의 객체를 하나 더 생성하여 따로 사용하고자 할 때, 깊은 복사를 한다. 각 변수가 참조하는 데이터영역의 주소가 달라지기 때문에 a, b는 서로 다른 데이터가 된다. 하지만, 참조형 ... 깊은복사Immer얕은복사불변성리액트spread operatorState리렌더링Immer TIL31: Parameters and Spread Operator 함수의 Parameter 즉, 전달인자의 갯수가 유동적일 경우 ES5에서는 arguments 라는 키워드를 활용했습니다. {0: 3, 1: 5, 2: 8, 3: 10} 즉 arguments 객체는 유사배열(Pseudo Array, Array-like Object)로써 배열 메소드는 사용할 수 없습니다. 한편 ES6에서는 Rest Parameter를 이용해 매개변수를 지정해 줍니다. 이 때 사... default parameterpseudo array전달인자array-like objectparameterES5rest parameterspread operatorargument유사 배열ES6매개변수arguments keywordES5
Shallow Copy vs Deep Copy feat.Spread Operator {...} source: Spread Operator는 Deep Copy를 만들어준다 하지만 데이터가 nested 되어 있을 경우에는 nested data는 shallow copy가 된다. 따라서 nested 되어있는 부분도 deep copy 하려면 {...a, b: {...b.foods}}이런식으로 또 한번의 Spread Operator를 행해 주어야 한다 source:... deep copyspread operatorES5shallow copyES5 Premitive & Reference (원시값과 참조값) String Boolean Primitive 🏐 단순히 값이 같으면 동일하게 판별 String은 Primitive(원시값)이다. 원시값의 모양이 같으면 같은 값으로 단순하게 판별한다. 🏐 할당된 값은 그대로 a가 10인 시점에서 b에 값을 한번 할당했기 때문에 a의 값이 변경되어도 다시 a를 할당하지 않는 한b는 변경되지 않는다. 🏐 변수 생성 과정 메모리에 { id: '1', count: ... referenceshallow copy참조값spread operatorpremitive원시값복사얕은복사 전개연산자premitive Day.12 바닐라 자바스크립트(2021.08.17) UI를 기준으로 컴포넌트를 나누니 변경사항이 발생했을때 너무 편하고 오류가 발생하더라도 더 잘찾을수 있는 것 같다. 뭐가 좋은지는 알겠지만 아직 자유자재로 UI기반 컴포넌트로 코드를 짤수는 없지만 연습하다보면 점점 나아질거다. 위 코드에서 ...이라는 spread operator가 사용되었는데 저게 너무 궁금해서 콘솔창에 출력해봤는데 오류가 뜬다. 그래서 이유를 찾아보다가 몰랐던 구조분해할당... 구조분해할당UI컴포넌트spread operatorES6vanillajsES6 [JS] 얕은복사와 깊은복사(feat.리액트에서 깊은복사를...?) 객체가 담겨있는 변수를 다른 변수에 할당하면 데이터 복사가 아닌 참조가 일어나게 되어, 한 변수의 데이터를 변경하면 다른 변수의 데이터도 함께 변경이 된다. 동일한 데이터를 바라보고 있는 것이 아닌, 똑같은 구조의 객체를 하나 더 생성하여 따로 사용하고자 할 때, 깊은 복사를 한다. 각 변수가 참조하는 데이터영역의 주소가 달라지기 때문에 a, b는 서로 다른 데이터가 된다. 하지만, 참조형 ... 깊은복사Immer얕은복사불변성리액트spread operatorState리렌더링Immer TIL31: Parameters and Spread Operator 함수의 Parameter 즉, 전달인자의 갯수가 유동적일 경우 ES5에서는 arguments 라는 키워드를 활용했습니다. {0: 3, 1: 5, 2: 8, 3: 10} 즉 arguments 객체는 유사배열(Pseudo Array, Array-like Object)로써 배열 메소드는 사용할 수 없습니다. 한편 ES6에서는 Rest Parameter를 이용해 매개변수를 지정해 줍니다. 이 때 사... default parameterpseudo array전달인자array-like objectparameterES5rest parameterspread operatorargument유사 배열ES6매개변수arguments keywordES5